<template>
    <div class="empty-wrapper">
        <image resize="cover" class="empty-icon" :src="emptyIcon" ></image>
        <text class="empty-txt" :style="{color: color}">{{emptyTxt}}</text>
    </div>
</template>

<style scoped>
    .empty-wrapper {
        flex: 1;
        justify-content: center;
        align-items: center;
    }
    .empty-icon{
        width: 189px;
        height: 171px;
        margin-bottom: 10px;
    }
    .empty-txt{
        text-align: center;
        font-size: 30px;
        font-family: msyhl;
    }
</style>

<script>
    import emptyIcon from 'assets/images/list-empty-icon.png';

    export default{
        props: {
            emptyTxt: {
                type: String,
                default: ''
            },
            color: {
                type: String,
                default: '#313131'
            }
        },
        data(){
            return{
                emptyIcon: emptyIcon
            }
        }
    }
</script>
